<template>
	<view class="page index">
		<view class="header">
			<navigator url="/pages/index/approval/apply" class="item" hover-class="none">
				<view class="tag" style="background-color: #879ffa;">
					<span class="iconfont icon">&#xe8ac;</span>
				</view>
				<view class="text">
					我申请的
				</view>
			</navigator>
			<navigator url="/pages/index/approval/waitApproval" class="item" hover-class="none">
				<view class="tag" style="background-color: #9fcaf2;">
					<span class="iconfont icon">&#xe64a;</span>
				</view>
				<view class="text">
					待我审批
				</view>
			</navigator>
			<navigator url="/pages/index/approval/approved" class="item" hover-class="none">
				<view class="tag" style="background-color: #d1f7a7;">
					<span class="iconfont icon">&#xe601;</span>
				</view>
				<view class="text">
					经我审批
				</view>
			</navigator>
			<navigator url="/pages/index/approval/copy" class="item" hover-class="none">
				<view class="tag" style="background-color: #b5b5b5;">
					<span class="iconfont icon">&#xe619;</span>
				</view>
				<view class="text">
					抄送给我
				</view>
			</navigator>
		</view>
		<view class="main">
			<navigator url="/pages/index/approval/createTravel" class="item" hover-class="none">
				<view class="tag">
					<span class="iconfont icon">&#xe8c5;</span>
				</view>
				<view class="text">
					差旅报销
				</view>
			</navigator>
			<navigator url="/pages/index/approval/createInvoice" class="item" hover-class="none">
				<view class="tag">
					<span class="iconfont icon">&#xeb22;</span>
				</view>
				<view class="text">
					开票申请
				</view>
			</navigator>
			<navigator url="/pages/index/approval/createReimburse" class="item" hover-class="none">
				<view class="tag">
					<span class="iconfont icon">&#xe600;</span>
				</view>
				<view class="text">
					发票报销
				</view>
			</navigator>
			<navigator url="/pages/index/approval/createApproval" class="item" hover-class="none">
				<view class="tag">
					<span class="iconfont icon">&#xe619;</span>
				</view>
				<view class="text">
					普通审批
				</view>
			</navigator>
		</view>
	</view>
</template>

<script>
</script>

<style lang="scss" scoped>
	@import "@/common/style/customicons.scss";
	.index{
		padding: 24rpx 28rpx;
		.header, .main{
			@include box;
			margin: 0 0 24rpx;
			@include flex-r-wrap;
			padding: 26rpx 24rpx;
			.item{
				width: 33.3%;
				@include flex-c-start-center;
				.tag{
					width: 114rpx;
					height: 114rpx;
					@include box;
					@include flex-r-center-center;
					border-radius: 20rpx;
					color: #fff;
					.icon{
						font-size: 70rpx;
					}
				}
				.text{
					color: #000;
					font-size: 28rpx;
					padding: 20rpx 4rpx;
				}
			}
		}
		.main{
			padding: 26rpx 24rpx 400rpx;
			.item{
				.tag{
					background-color: #879ffa;
				}
			}
		}
	}
</style>